<template>
    <div class='recommends'>
        <div class='recommend'>
            <h3>推荐商家</h3>
        </div>
        <div class="allsection">
            <!-- v-for遍历时获取item里面的参数作为属性 -->
            <router-link :to="'/detail/commodity?id='+item.id" :key="index"
                
                v-for="(item,index) in recommendList">
            <section class='merchant-list' @click='sendmsgDetail(index)'>           
                <div class='select-left'>
                    <img :src='item.image_path' alt=''/>
                </div>

                <div class='select-right'>
                    <section class='merchant-name'>
                        <div class='merchant-name-shops'>
                            <span class='merchant-txt1'>品牌</span>
                            <span class='merchant-txt2'>{{ item.name }}</span>
                        </div>
                        <div class='ticket'>
                            <span>票</span>
                        </div>
                    </section>
                    <section class='merchant-grade'>
                        <div class='merchant-grade-p'>
                            <div class='merchant-grade-rating'>
                                <i class='iconfont icon-xing'></i>
                                <i class='iconfont icon-xing'></i>
                                <i class='iconfont icon-xing'></i>
                                <i class='iconfont icon-xing'></i>
                                <i class='iconfont icon-xing'></i>
                            </div>
                            <span class='merchant-grade-p-ran'>{{ item.rating }}</span>
                            <span>月售{{ item.recent_order_num }}单</span>
                        </div>
                        <div class='merchant-grade-count' v-if='item.delivery_mode'>
                            蜂鸟专送
                        </div>
                    </section>
                    <section class='merchant-price'>
                        <div class='merchant-price-price'>
                            <span>￥0起送</span>
                            <span>配送费￥3.5</span>
                            <span>￥14/人</span>
                        </div>
                        <div class='merchant-price-time'>
                            <span>2.52km</span>
                            <span>34分钟</span>
                        </div>
                    </section>
                    <section class='merchant-active'>
                        <div class='merchant-active-spread' >


                            <div class='active-spread' 
                                :key='key'
                                v-for='(value,key) in item.activities'
                                :class="{ active_spread: key >= item.isShow }"
                                >
                                <!-- :class="{ active_spread: key >= 2 && (index+1) !== isShow }" -->
                                <span class='active-spread-color'>{{ value.icon_name }}</span>
                                <p>{{ value.description }}</p>

                            </div>
                        </div>
                        <div class='merchant-active-count' @click='isShowActive(index)' v-if='item.activities.length>2?true:false'>
                            <span>{{ item.activities.length }}个活动</span>
                            <span ref='active_button' v-html='item.isShow == 2?b:a'><i class='iconfont'>&#xe61b;</i></span>                            
                        </div>
                    </section>
                </div>
             
            </section>
            </router-link>
        </div>
        <!-- qq -->
    </div>
</template>

<script>
import axios from 'axios'
import $ from 'jquery'
export default {
    name:'recommend',
    data(){
        return {
            recommendList:[],
            // activeList:[],
            a:"<i class='iconfont'>&#xe616;</i>",
            b:"<i class='iconfont'>&#xe61b;</i>",
            scroll:'',
            pullUp:true,
            page:0,
        }
    },
    methods:{
        isShowActive(index){

            // if (index + 1 == this.isShow) {
            //     this.isShow = 0;
            // } else {
            //     this.isShow = index + 1;
            // }
            
        
            // if(this.isShow==2){
            //     this.isShow=100
            //     this.$refs.active_button.innerHTML = "<i class='iconfont'>&#xe616;</i>"
               
            // }else{
            //     this.isShow=2;
            //     this.$refs.active_button.innerHTML = "<i class='iconfont'>&#xe61b;</i>"            
            // } 
            var a = this.recommendList[index].isShow;
            if(a==2){
                a=100;
                // console.log(this.$refs.active_button)
                // this.$refs.active_button.innerHTML = "<i class='iconfont'>&#xe616;</i>"
            }else{
                a=2;
                // console.log(this.$refs.active_button)
                // this.$refs.active_button.innerHTML = "<i class='iconfont'>&#xe61b;</i>" 
            }
            this.recommendList[index].isShow = a;
        },
        menu() {
            this.scroll = document.body.scrollTop;
            // console.log(this.scroll)
            var clientHieght = $(window).height();
            // console.log($(document).height()- this.scroll);
            var isAdd = this.scroll + clientHieght - $('.recommends').height();

            // var pullUp = true;
            if(isAdd >= 0 && this.pullUp == true){
                // console.log(this.isAddData());
                this.pullUp = false;
                // console.log(toggle);
                this.page += 20,
                this.isAddData(this.page);

            }
        },
        isAddData(n){
            var that=this;
            axios.get('http://localhost:3000/recommend',{
                params:{
                    page:n,
                }
            }).then(function(res){
                if(res){
                    var arr=res.data;
                    //打开上拉加载的开关
                    that.pullUp = true;
                    arr.map(function(item,index){

                        var a = item.image_path.split('');
                        console.log(a);
                        a.splice(1,0,'/');
                        a.splice(4,0,'/');
                        if(a.join('').indexOf('jpeg')!=-1){
                            item.image_path = 'https://fuss10.elemecdn.com/'+a.join('')+'.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
                        }else{
                            item.image_path = 'https://fuss10.elemecdn.com/'+a.join('')+'.png?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
                        }
                        item.isShow = 2;

                    })
                    // console.log(arr);
                    that.recommendList = that.recommendList.concat(arr);
                    //存储localStorage
                    // if(window.localStorage.recommendList){
                    //     var changeLocalStorage = JSON.parse(window.localStorage.recommendList).concat(arr);
                    //     window.localStorage.recommendList = JSON.stringify(changeLocalStorage)
                    // }else{
                    //     window.localStorage.recommendList = JSON.stringify(arr);
                    // }
                    window.localStorage.recommendList = JSON.stringify(that.recommendList);
                    
                    console.log(that.recommendList);
                }                
            }).catch(function(err){
                console.log(err)
            })
        },
        sendmsgDetail(index){
            this.$store.state.detailPageMsg = this.recommendList[index];
            // console.log(this.$store.state.detailPageMsg)
        }
    },
    computed:{
        getActiveCount(){
            return this.activeList.length > 2 ? true : false;
        }
    },
    created(){
        //如果本地存储过recommendList读取它
        // console.log(this.$store.stste.id)
        if(window.localStorage.recommendList){
            this.recommendList = JSON.parse(window.localStorage.recommendList);
            // console.log(this.recommendList)
        }else{
            this.isAddData(this.page);
        }
        
    },
    // methods: {
    //   menu() {
    //     this.scroll = document.body.scrollTop;
    //     console.log(this.scroll)
    //   }
    // },
    mounted() {
      window.addEventListener('scroll', this.menu)
    },

}
</script>

<style lang="scss" scoped>
    @import '../../../static/hotcss/px2rem.scss';
    .recommends{
        background-color: #FFF;
        .recommend{
            height: px2rem(68);
            
            margin-top: px2rem(20);
            // background-color: #FFF;
            h3{
                padding-left: px2rem(30);
                font-weight: 600;
                border-bottom: px2rem(1) solid #eee;
                line-height: px2rem(67);
                font-size: px2rem(30);
            }
        }
        .allsection{
            width: 100%;
            .merchant-list{
                // height: px2rem(274);
                border-bottom: px2rem(1) solid #eee;
                display: flex;
                .select-left{
                    width: px2rem(160);
                    height: 100%;
                    box-sizing: border-box;
                    padding: px2rem(30) px2rem(20);

                    img{
                        width: px2rem(120);
                        height: px2rem(120);
                    }
                }
                .select-right{
                    flex: 1;
                    height: 100%;
                    
                    box-sizing: border-box;
                    padding: px2rem(30) px2rem(20) px2rem(30) 0; 
                    .merchant-name{
                        width: 100%;
                        display: flex;
                        height: px2rem(32);
                        justify-content: space-between;
                        .merchant-name-shops{
                            // width: 60%;
                            display: flex;
                            align-items: center;
                            .merchant-txt1{
                                width: px2rem(54);
                                font-size: px2rem(20);
                                background-color: #ffd930;
                                border-radius: px2rem(5);
                                line-height: px2rem(30);
                                text-align: center;
                                font-weight: 700;
                            }
                            .merchant-txt2{
                                width: px2rem(311);
                                box-sizing: border-box;
                                padding-left: px2rem(10);
                                font-size: px2rem(30);
                                font-weight: 700;
                                line-height: px2rem(36);
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                        .ticket{
                            // width: 40%;
                            font-size: px2rem(22);
                            line-height: px2rem(32);
                        }
                    }

                    .merchant-grade{
                        height: px2rem(26);
                        // box-sizing: border-box;
                        margin-top: px2rem(15);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .merchant-grade-p{
                            display: flex;
                            .merchant-grade-rating{
                                width: px2rem(110);
                                // white-space: nowrap;
                                display: flex;
                                align-items: center;
                                justify-content: space-around;
                                
                                i{
                                    font-size: px2rem(20);
                                    color: #ffaa0c;
                                    // line-height: px2rem(26);
                                }
                            }
                            span{
                                font-size: px2rem(22);
                            }
                            .merchant-grade-p-ran{
                                color: #ffaa0c;
                                padding: 0 px2rem(6);
                            }
                        }
                        .merchant-grade-count{
                            height: 100%;
                            color: #FFF;
                            font-size: px2rem(20);
                            background-color: #2395ff;     
                            padding:px2rem(1) px2rem(5);
                            border-radius: px2rem(3);
                            
                        }
                    }

                    .merchant-price{
                        height: px2rem(24);
                        margin-top: px2rem(17);
                        display: flex;
                        justify-content: space-between;
                        .merchant-price-price{
                            font-size: px2rem(21);
                            color: #666;
                            line-height: px2rem(24);
                            span:nth-child(2)::before{
                                content:'/';
                                color: #ddd;
                                margin: 0 px2rem(2);
                            }
                            span:nth-child(3)::before{
                                content:'/';
                                color: #ddd;
                                margin: 0 px2rem(2);
                            }
                        }
                        .merchant-price-time{
                            font-size: px2rem(21);
                            color: #666;
                            span:nth-child(2){
                                color: #2395ff;
                            }
                            span:nth-child(2)::before{
                                content:'/';
                                color: #ddd;
                                margin: 0 px2rem(2);
                            }
                        }
                    }

                    .merchant-active{
                        margin-top: px2rem(15);
                        border-top: px2rem(1) solid #eee;
                        position: relative;
                        .merchant-active-spread{
                            width: 100%;
                            padding-top: px2rem(15);
                            .active-spread{
                                display: flex;
                                span{
                                    height: px2rem(20);
                                    
                                    color: rgb(255, 255, 255); 
                                    border-color: rgb(240, 115, 115);
                                    font-size: px2rem(20);
                                    padding: px2rem(2);
                                    text-align: center;
                                    line-height: px2rem(20);
                                    border-radius: px2rem(5);
                                    position: relative;
                                    top: px2rem(3);
                                }
                                .active-spread-color{
                                    background-color: rgb(240, 115, 115);
                                }

                                p{
                                    width: px2rem(373);
                                    padding-left: px2rem(10);
                                    font-size: px2rem(20);
                                    color: #939393;
                                    line-height: px2rem(32);
                                }
                            }
                            .active_spread{
                                display: none;
                            }
                        }
                        .merchant-active-count{
                            position: absolute;
                            right: 0;
                            top: px2rem(15);
                            font-size: px2rem(20);
                            color: #939393;
                            span{
                                i{
                                    font-size: px2rem(20);
                                }
                            }
                        }
                    }
                }
            }
        }
        
    }
    
</style>
